<template>
  <div>
    <!-- 快速入口 -->
    <div class="model">
      <el-divider style="margin-bottom:30px;">
        <span class="el_divider">快速入口</span>
      </el-divider>
      <el-row :gutter="$store.state.device == 'pc' ? 15 : 0" class="el_row">
        <el-col
          :span="$store.state.device == 'pc' ? 3 : 8"
          v-for="(item, index) in list"
          :key="index"
          class="el_col"
        >
          <a :href="item.path">
            <div class="">
              <div class="iconBox">
                <i :class="item.icon"></i>
              </div>
              <h1>{{ item.name }}</h1>
            </div>
          </a>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "My SJTU",
          icon: "el-icon-user",
          path: "http://my.sjtu.edu.cn/"
        },
        {
          name: "班车信息",
          icon: "el-icon-guide",
          path: "https://houqin.sjtu.edu.cn/service.php?cid=26"
        },
        {
          name: "图书资料",
          icon: "el-icon-reading",
          path: "http://www.lib.sjtu.edu.cn/"
        },
        {
          name: "交大邮箱",
          icon: "el-icon-message",
          path: "http://mail.sjtu.edu.cn/"
        },
        {
          name: "教学信息服务",
          icon: "el-icon-chat-square",
          path: "http://electsys.sjtu.edu.cn/"
        },
        {
          name: "视觉形象识别系统",
          icon: "el-icon-view",
          path: "http://vi.sjtu.edu.cn/"
        },
        {
          name: "机关服务评议",
          icon: "el-icon-document",
          path: "https://www.sjtu.edu.cn/opinion/index.html"
        },
        {
          name: "校园管理",
          icon: "el-icon-office-building",
          path: "http://xygl.sjtu.edu.cn/"
        },
        {
          name: "校园安全",
          icon: "el-icon-office-building",
          path: "http://bwc.sjtu.edu.cn/"
        },
        {
          name: "综合信息",
          icon: "el-icon-document-copy",
          path: "http://info.sjtu.edu.cn/index.aspx?jatkt=rejected"
        },
        {
          name: "网络信息中心",
          icon: "el-icon-sell",
          path: "https://net.sjtu.edu.cn/"
        },
        {
          name: "信息公开",
          icon: "el-icon-money",
          path: "http://gk.sjtu.edu.cn/"
        },
        {
          name: "在线教学平台",
          icon: "el-icon-monitor",
          path: "https://oc.sjtu.edu.cn/"
        },
        {
          name: "水源社区",
          icon: "el-icon-discount",
          path: "https://dev.bbs.sjtu.edu.cn/"
        },
        {
          name: "地方合作",
          icon: "el-icon-location-information",
          path: "http://lc.sjtu.edu.cn/"
        },
        {
          name: "博士后流动站",
          icon: "el-icon-location-information",
          path: "http://postd.sjtu.edu.cn/"
        }
      ]
    };
  },
  methods: {}
};
</script>

<style scoped lang="scss">
$border-height: 20px;
$boxH: 60px;
.model {
  width: $base-width;
  margin: 0 auto;
  padding: 30px 0;
  @media only screen and (min-width: 480px) and (max-width: 1200px) {
    /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
    width: 100%;
  }
  @media screen and (min-width: 320px) and (max-width: 480px) {
    /* 在这里写小屏幕设备的样式 */
    width: 100%;
  }
  .el_divider {
    font-size: 14px;
    color: #999;
  }
  .el_row {
    border-bottom: 1px solid #eee;
    a {
      position: relative;
      display: block;
      padding: 20px 0;
      border-radius: 5px;
      transition: 0.3s;
      &:hover {
        // transform: scale(1.01);
        box-shadow: 0 5px 10px #999;
      }
      .iconBox {
        width: 60%;
        height: 60px;
        border: 1px solid #c9ae89;
        margin: 0 auto 10px auto;
        position: relative;
        border-bottom: $border-height solid #c9ae89;
        background-color: #f8f2ea;
        text-align: center;
        line-height: (60px - $border-height);
        @media only screen and (min-width: 480px) and (max-width: 1200px) {
          /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
          height: 80px;
          line-height: (80px - $border-height);
        }
        @media screen and (min-width: 320px) and (max-width: 480px) {
          /* 在这里写小屏幕设备的样式 */
          height: 80px;
          line-height: (80px - $border-height);
        }
        &::after {
          width: 100%;
          height: $border-height;
          content: " ";
          display: block;
          position: absolute;
          bottom: (-$border-height);
          left: 0px;
          background-image: url("https://www.sjtu.edu.cn/resource/assets/img/svg/decorate-hz.svg");
          background-repeat: no-repeat;
          background-size: contain;
          background-position-y: 50%;
        }
        i {
          font-size: 22px;
          color: #c9ae89;
        }
      }
      h1 {
        font-weight: 500;
        font-size: 10px;
        text-align: center;
      }
    }
  }
}
</style>
